<template>
  <div class="songs-container">
    <div class="tab-bar">
      <span class="item" :class="{ active: tag === 0 }" @click="tag = 0">全部</span>
      <span class="item" :class="{ active: tag === 7 }" @click="tag = 7">华语</span>
      <span class="item" :class="{ active: tag === 96 }" @click="tag = 96">欧美</span>
      <span class="item" :class="{ active: tag === 8 }" @click="tag = 8">日本</span>
      <span class="item" :class="{ active: tag === 16 }" @click="tag = 16">韩国</span>
    </div>
    <!-- 底部的table -->
    <div class="song-card-wrap">
      <SongCard :songs="songs" />
    </div>
  </div>
</template>

<script>
import { reqNewSongs, reqSongDetail } from '../../requset/api'
import SongCard from '@/components/songcard/songcard'
export default {
  name: 'songs',
  data () {
    return {
      songs: [],
      tag: 0
    }
  },

  created () {
    this.getNewSongs()
  },

  watch: {
    tag () {
      this.getNewSongs()
    }
  },
  methods: {
    // 获取最新音乐
    async getNewSongs () {
      const res = await reqNewSongs({ areaId: this.tag })
      // 获取歌单详情
      this.songs = res.data
    },
    // 获取歌单详情
    async getPlaylistDetail (trackIds) {
      // let params = this.$utils.songDetailParams(trackIds)
      // const { songs } = await reqSongDetail(params)
      // return songs.map(x => this.$utils.createSong(x))
    },
  },
  components: {
    SongCard
  }
}
</script>

<style lang="less" scoped>
.songs-container {
  padding: 12px;
  .tab-bar {
    display: flex;
    justify-content: flex-end;

    .item {
      padding: 12px 0;
      margin: 0 12px;
      color: var(--tab-item-color);
      font-size: 12px;
      cursor: pointer;
      &:hover {
        color: var(--tab-item-hover-color);
      }
      &.active {
        color: @theme-color;
        &:hover {
          color: @theme-color;
        }
      }
    }
  }
}
</style>
